{% extends "base.html" %}

{% block css %}
    <style>
        #start-btn {
            border-color: #1dc5a3;
            background-color: #1dc5a3;
            border-radius: 2px;
            border: none;
            color: white;
            padding: 7px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }

        #start-btn:hover {
            color: red;
        }

        #stop-btn {
            border-color: #1dc5a3;
            background-color: #FF6666;
            border-radius: 2px;
            border: none;
            color: white;
            padding: 7px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
        }

        #stop-btn:hover {
            color: black;
        }

        iframe {
            width: 100%;
            height: 560px;
        }

        .this:hover {
            color: red;
        }
    </style>
{% endblock %}

{% block nav %}
    {% for object in model_list %}
        <li><a href="{{ object.url }}"><i class="{{ object.icon }}"></i>{{ object.model_name }}</a>
        </li>

    {% endfor %}

{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this-page">性能测试</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <a class="this" href="{% url 'base:performance' %}"
                       style="margin-left: 5%;border-bottom: 2px solid #409EFF;">Locust页面</a>
                    <a class="this" href="{% url 'base:performance_report' %}" style="margin-left: 3%">聚合报告</a>
                    <span title="开启：自定义脚本；关闭：使用HttpRunner；默认关闭." style="margin-left: 10%">状态：</span>
                    {% if status %}
                        <a href="javascript:void(0)" class="index_data sure-btn"><i
                                class="fa fa-toggle-on fa-1x">&nbsp;&nbsp;</i></a>
                        <a class="btn btn-primary" href="{% url 'base:debugtalk' %}"
                           style="margin-left: 15%;"><i
                                class="fa fa-file-code-o"></i>&nbsp;自定义脚本</a>
                        &nbsp;&nbsp;&nbsp;
                        <button id="start-btn" class="start-master" onclick="master()"><i
                                class="fa fa-thumbs-o-up"></i>&nbsp;启动
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button id="stop-btn" class="stop-master" onclick="stop()"
                                title="注：locust 已运行的情况下，需要先关闭所有的 slave ，然后再执行此操作！"><i
                                class="fa fa-thumbs-o-down"></i>&nbsp;停止
                        </button>
                        &nbsp;&nbsp;&nbsp;
                    {% else %}
                        <a href="javascript:void(0)" class="index_data sure-btn"><i
                                class="fa fa-toggle-off fa-1x">&nbsp;&nbsp;</i></a>
                        <button id="start-btn" class="start-master" onclick="master()" style="margin-left: 28%"><i
                                class="fa fa-thumbs-o-up"></i>&nbsp;启动
                        </button>
                        &nbsp;&nbsp;&nbsp;
                        <button id="stop-btn" class="stop-master" onclick="stop()"
                                title="注：locust 已运行的情况下，需要先关闭所有的 slave ，然后再执行此操作！"><i
                                class="fa fa-thumbs-o-down"></i>&nbsp;停止
                        </button>
                        &nbsp;&nbsp;&nbsp;
                    {% endif %}
                </div>
                {% if debug %}
                    <iframe src="http://localhost:8089/" frameborder="0"
                            scrolling="0"></iframe>
                {% else %}
                    <iframe src="http://www.easytest.xyz:8089/" frameborder="0"
                            scrolling="0"></iframe>
                {% endif %}


            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        $('.index_data').click(function () {
            var index = $('.index_data').find('i');
            var i = index.attr("class");
            var off;
            if (i.indexOf('off') == -1) {
                index.removeClass();
                index.addClass('fa fa-toggle-off fa-1x');
                off = 0;
            } else {
                index.removeClass();
                index.addClass('fa fa-toggle-on fa-1x');
                off = 1;
            }
            $.ajax({
                type: 'post',
                url: "/base/performance_status/",
                data: {
                    "off": off
                },
                success: function (data) {
                    alert(data);
                    window.location.reload();
                }
            })
        });

        function master() {
            var slave;
            var status = '{{ status }}';
            if (status == "True") {
                slave = prompt('输入locust的启动命令【locust -f locustfile.py --参数】：');
            } else if (status == "False") {
                slave = prompt('设置需要启动的 slave 数量：');
            }
            if (slave || slave === "") {
                $.ajax({
                    url: "/base/start_locust/",
                    type: "get",
                    data: {
                        "make": 'master',
                        "status": status,
                        "slave": slave
                    },
                    success: function (data) {
                        console.log(data);
                        if (data == 'ok') {
                            alert("启动 locust 成功！");
                            window.location.reload();
                        } else if (data == "no") {
                            alert("测试计划未设置 性能测试 参数！")
                        }
                        else {
                            alert("出现异常，请联系管理员！");
                        }


                    }
                })
            } else {
                console.log("点击的取消按钮.")
            }

        }

        function stop() {
            var res = confirm("确定停止 locust 服务吗？");
            if (res) {
                $.ajax({
                    url: "/base/start_locust/",
                    type: "get",
                    data: {
                        "make": 'stop'
                    },
                    success: function (data) {
                        if (data == 'ok') {
                            alert("停止 locust 成功！");
                            window.location.reload();
                        } else {
                            alert("出现异常，请联系管理员！");
                        }
                    }
                })
            } else {
                console.log("点击的取消按钮.")
            }


        }
    </script>
{% endblock %}
